<template>
	<div class="Word">
		<div class="line"></div>
		<el-menu class="el-menu-demo" mode="horizontal" menu-trigger="click" @select="handleSelect" @open="handleOpen"
			@close="handleClose" background-color="#1c9df2" text-color="#fff" active-text-color="#ffd04b">
			<el-submenu index="1">
				<template slot="title">菜单一</template>
				<el-menu-item index="1-1" @click="show_message()">菜单1</el-menu-item>
				<el-menu-item index="1-2" @click="show_prompt()">菜单2</el-menu-item>
				<el-menu-item index="1-3" @click="show_alert()">菜单3</el-menu-item>
			</el-submenu>
			<el-submenu index="2">
				<template slot="title">菜单二</template>
				<el-menu-item index="2-1" @click="show_message2()">选项1</el-menu-item>
				<el-menu-item index="2-2" @click="show_prompt2()">选项2</el-menu-item>
				<el-menu-item index="2-3" @click="show_confirm()">选项3</el-menu-item>
			</el-submenu>
			<el-menu-item index="3" @click="show_confirm2()">询问框</el-menu-item>
			<el-menu-item index="4" @click="dialog_open()">模态对话框</el-menu-item>
		</el-menu>

		<el-dialog title="模态对话框" :visible.sync="dialogTableVisible" @close="dialog_close" @open="dialog_open()">
			<p>自定义HTML字符串</p>
		</el-dialog>

		<!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
		<div style="width:auto; height:900px;" v-html="poHtmlCode"></div>

	</div>
</template>
<script>
import request from '@/utils/request'
export default {
	data() {
		return {
			poHtmlCode: '',
			dialogTableVisible: false
		}
	},
	created: function () {
		// 请求后端打开文件
		this.openFile().then(response => {
			this.poHtmlCode = response;
		});
	},
	methods: {
		handleSelect(key, keyPath) {
			pageofficectrl.Enabled = true;
			console.log(key, keyPath);
		},
		handleOpen() {
			pageofficectrl.Enabled = false;
			console.log('submenu opened');
		},
		handleClose() {
			pageofficectrl.Enabled = true;
			console.log('submenu closed');
		},
		show_message() {
			this.$message('这是一条消息提示');
		},
		show_prompt() {
			pageofficectrl.Enabled = false;
			this.$prompt('请输入你的邮箱', '输入框', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(({ value }) => {
				pageofficectrl.Enabled = true;
				//   this.$message({
				//     type: 'success',
				//     message: '你的邮箱是: ' + value
				//   });
			}).catch(() => {
				pageofficectrl.Enabled = true;
				//   this.$message({			
				//     type: 'info',
				//     message: '取消输入'
				//   });       
			});
		},
		show_alert() {
			pageofficectrl.Enabled = false;
			this.$alert('对话框内容', '信息', {
				confirmButtonText: '确定',
				callback: action => {
					pageofficectrl.Enabled = true;
					// this.$message({
					// 	type: 'info',
					// 	message: `action: ${action}`
					// });
				}
			});
		},
		show_message2() {
			alert('浏览器自身的alert提示消息框！');
		},
		show_prompt2() {
			pageofficectrl.Enabled = false;
			this.$alert('<textarea style="height:200px;width:390px;"></textarea>', '文本输入框', {
				dangerouslyUseHTMLString: true,
				callback: action => {
					pageofficectrl.Enabled = true;
					let textareaValue = document.querySelector('textarea').value;
					alert("您输入的内容是：" + textareaValue);
				}
			});
		},
		show_confirm() {
			pageofficectrl.Enabled = false;
			if (confirm('浏览器自身的确认框：你确定要执行这个操作吗？')) {
				// 用户点击了确认
				pageofficectrl.Enabled = true;
			} else {
				// 用户点击了取消
				pageofficectrl.Enabled = true;
			}
		},

		show_confirm2() {
			pageofficectrl.Enabled = false;
			this.$confirm('确认此操作吗？', '询问框', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				pageofficectrl.Enabled = true;
				// this.$message({
				// 	type: 'success',
				// 	message: '确认成功!'
				// });
			}).catch(() => {
				pageofficectrl.Enabled = true;
				// this.$message({
				// 	type: 'info',
				// 	message: '已取消删除'
				// });
			});
		},
		dialog_open() {
			pageofficectrl.Enabled = false;
			this.dialogTableVisible = true;
		},
		dialog_close() {
			pageofficectrl.Enabled = true;
			this.dialogTableVisible = false;
		},
		OnPageOfficeCtrlInit() {
			// PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
			pageofficectrl.AddCustomToolButton("弹出模态对话框", "dialog_open()", 0);
		},
		openFile() {
			return request({
				url: '/DivMessage/Word',
				method: 'get',
			})
		}
	},
	mounted: function () {
		//将当前页面methods中定义的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
		window.POPageMounted = this;//此行必须
	}
}
</script>
